<m-card [autoHeight]="true" [fullscreen]="fullscreen">
  <ng-container card-head>
    <m-key-search [label_text]="'权限查询'" #keySearchRef>
      <div class="d-flex align-items-center">
        <m-nav-tabs
          [appearance]="'pill'"
          [data]="tabs"
          [value]="'user'"
          (valueChange)="change($event)"
        ></m-nav-tabs>
        <button mat-icon-button (click)="fullscreen = !fullscreen">
          <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
        </button>
      </div>
    </m-key-search>
  </ng-container>
  <div class="row h-100">
    <ng-container
      *ngFor="let resource of resources; last as last; first as first"
      [ngSwitch]="resource.name"
    >
      <div class="col-4" *ngSwitchCase="'user'">
        <m-api-data-table
          [dataSource]="resource.resource$ | async"
          [selection]="last ? null : resource.selection"
          [searchControl]="keySearchRef"
        >
          <ng-container mDataTableColumn header="角色">
            <ng-template let-type="utype">
              <td><m-user-type-text [type]="type"></m-user-type-text></td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="姓名">
            <ng-template let-name="full_name">
              <td class="g-nowrap">{{ name }}</td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="状态">
            <ng-template let-status="status">
              <td>
                <m-enable-status-text [status]="status"></m-enable-status-text>
              </td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="工号">
            <ng-template let-job="job_number">
              <td>{{ job }}</td>
            </ng-template>
          </ng-container>
        </m-api-data-table>
      </div>
      <div *ngSwitchCase="'pc'" class="col-4">
        <m-api-data-table
          [dataSource]="resource.resource$ | async"
          [selection]="last ? null : resource.selection"
          [searchControl]="keySearchRef"
        >
          <ng-container mDataTableColumn header="终端别名">
            <ng-template let-name="name">
              <td class="g-nowrap">{{ name }}</td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="状态">
            <ng-template let-status="status">
              <td>
                <m-enable-status-text [status]="status"></m-enable-status-text>
              </td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="系统状态">
            <ng-template let-status="need_upgrade">
              <td>
                <m-update-status-text [status]="status"></m-update-status-text>
              </td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="配置预览" [hidden]="first">
            <ng-template let-pc_id="pc_id">
              <td>
                <button mat-icon-button (click)="previewConfig(pc_id)">
                  <mat-icon>remove_red_eye</mat-icon>
                </button>
              </td>
            </ng-template>
          </ng-container>
        </m-api-data-table>
      </div>
      <div *ngSwitchCase="'software'" class="col-4">
        <m-api-data-table
          [dataSource]="resource.resource$ | async"
          [selection]="last ? null : resource.selection"
          [searchControl]="keySearchRef"
        >
          <ng-container mDataTableColumn header="软件名称">
            <ng-template let-name="name">
              <td class="g-nowrap">{{ name }}</td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="软件更新">
            <ng-template let-status="status">
              <td>
                <m-update-status-text [status]="status"></m-update-status-text>
              </td>
            </ng-template>
          </ng-container>
        </m-api-data-table>
      </div>
    </ng-container>
  </div>
</m-card>
